<template>
  <div>{{}}</div>
</template>

<script>
import { watch, ref } from "@vue/composition-api";

export default {
  setup() {
    const count = ref(0);

    /** 1) 监视单个*/
    watch(
      count, //相较reactive数据,不用()=>
      (cur, prev) => {
        console.log(cur, prev);
        /*
            0 undefined ← 默认组件创建时会打印 除非你手动将lazy置为true
            1 0
          */
      },
      {
        // lazy: true
      }
    );

    setTimeout(() => {
      count.value += 1;
    }, 2000);

    /** 2) 监视多个*/
    const name = ref("ahhh");
    watch(
      [count,name],
      ([count, name], [prevCount, prevName]) => {
        console.log("new count:", count);
        console.log("new name", name);

        console.log("old count:", prevCount);
        console.log("old name", prevName);
      },
      {
        lazy: true
      }
    );

    setTimeout(() => {
      count.value += 1;
    }, 2000);

    setTimeout(() => {
      name.value = "ahhh2";
    }, 2000);
  }
};
</script>

<style scoped></style>
